<template>
    <div class="customBox">
        <h3 class="title">
            <el-input v-model="searchKey" clearable placeholder="关键字"></el-input>
            <el-button class="addButton" style="margin: 0 0 0 20px;" type="primary" size="mini" round @click="refresh"
                circle title="刷新">
                <i class="el-icon-refresh"></i>
            </el-button>
            <el-button class="addButton" type="success" size="mini" round @click="addHeaderKey" circle title="添加">
                <i class="el-icon-plus"></i>
            </el-button>
        </h3>
        <div class="customBox-body">
            <div class="CreatKeyBox" v-if="showCreat">
                <div>添加自定义Key值</div>
                <br>
                <div class="title">
                    <el-input v-model="CreatKey" placeholder="关键字"></el-input>
                    <el-button class="addButton" style="margin: 0 0 0 20px;" icon="el-icon-check" type="success"
                        size="mini" circle title="确定" @click="creatKey">
                    </el-button>
                    <el-button class="addButton" @click="showCreat = false" type="danger" size="mini"
                        icon="el-icon-close" circle title="取消">
                    </el-button>
                </div>
            </div>

            <div class="empty" v-if="!items.length">
                暂无数据
            </div>
            
            <div class="KeyItem" v-for="(item, index) in items" :key="index">
                <div class="title" v-if="!item.edit">
                    <div style="width: 100%;" class="key">{{item.key}}</div>
                    <el-button class="addButton" style="margin: 0 0 0 20px;" icon="el-icon-edit" type="warning"
                        size="mini" circle title="编辑" @click="item.edit = true;item.editKey = item.key">
                    </el-button>
                    <el-button class="addButton" @click="deleteKey(item)" type="danger" size="mini"
                        icon="el-icon-delete" circle title="删除">
                    </el-button>
                </div>

                <div class="title" v-if="item.edit">
                    <el-input v-model="item.editKey" placeholder="关键字"></el-input>
                    <el-button class="addButton" @click="updataKey(item)" style="margin: 0 0 0 20px;"
                        icon="el-icon-check" type="success" size="mini" circle title="确定">
                    </el-button>
                    <el-button class="addButton" @click="item.edit = false" type="danger" size="mini"
                        icon="el-icon-close" circle title="取消">
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                CreatKey: '',
                showCreat: false,
                searchKey: '',
            }
        },

        computed: {
            ...mapState("customKey", {
                keyArrray: state => state.keyArray,
            }),
            items: function () {
                let _search = this.searchKey;
                let reg = new RegExp(_search, 'ig'); // 不区分大小写
                if (_search) {
                    return this.keyArrray.filter(function (item) {
                        if (item.key.toString().match(reg)) {
                            return item;
                        }
                    });
                }
                return this.keyArrray;
            },
        },
        methods: {
            deleteKey(item) {
                var confirm = this.$confirm('是否删除自定义Key值？');
                if (confirm) {
                    this.$store.dispatch('customKey/deleteKey', item.customKeyId);
                };
            },
            updataKey(item) {
                this.$store.dispatch('customKey/updateKey', {
                    id: item.customKeyId,
                    key: item.editKey,
                });
            },
            creatKey() {
                this.$store.dispatch('customKey/creatKey', {
                    key: this.CreatKey,
                    callback: () => {
                        this.showCreat = false;
                    }
                });
            },
            refresh() {
                this.$store.dispatch('customKey/getRenderData');
            },
            addHeaderKey() {
                this.CreatKey = '';
                this.showCreat = true;
            }
        },
    }
</script>
<style scoped>
    .title {
        display: flex;
        height: 40px;
        align-items: center;
    }

    .title .key {
        color: #666;
    }

    .addButton {
        width: 28px;
        height: 28px;
    }

    .CreatKeyBox {
        padding: 15px 0px 15px 3px;
        margin: 20px 0;
        border-bottom: 1px solid #DCDFE6;
    }

    .KeyItem {
        padding: 15px 0px 15px 3px;
        border-bottom: 1px solid #DCDFE6;
    }

    .empty {
        text-align: center;
        line-height: 100px;
        color: #aaa;
    }
</style>